<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
    <style>
       .tab ul {
          overflow: hidden;
          padding: 0;
          margin: 0;
        }

      .tab ul li {
      box-sizing: border-box;
      padding: 0;
      float: left;
      width: 100px;
      height: 45px;
      line-height: 45px;
      list-style: none;
      text-align: center;
      border-top: 1px solid blue;
      border-right: 1px solid blue;
      cursor: pointer;
    }
    .tab ul li:first-child {
      border-left: 1px solid blue;
    }
    .tab ul li.active {
      background-color: orange;
    }
    
    </style>
</head>
<body>
    <div id="app">
       <div class="tab">
          <ul>
             <li :class="k==cur?'active':''"  @click="handle(k)"  v-for="item,k in list" :key="item.id">
               {{item.title}}
             </li>
          </ul>
          <img :src="list[cur].path">
       </div>
    </div>
</body>
<script>
var vm = new Vue({
    el: "#app",
    data: {
        cur: 0,
        list: [{
          id: 1,
          title: 'apple',
          path: '../img/1.png'
        },{
          id: 2,
          title: 'orange',
          path: '../img/2.png'
        },{
          id: 3,
          title: 'lemon',
          path: '../img/3.png'
        }]
    },
    methods:{
      handle(k){
        console.log('选择',k);
        this.cur = k 
      }
    }
});

</script>
</html>